<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <script type="text/javascript">
        function handleLoginRequest(xhr, status, args) {
            if (args.validationFailed || !args.loggedIn) {
                PF('dlg1').jq.effect("shake", {times: 5}, 100);
            }
            else {
                PF('dlg1').hide();
                $('#loginLink').fadeOut();
            }
        }
    </script>

    <h:body>


        <ui:composition template="/resources/template/template.xhtml">

            <ui:define name="content">

                <h:outputStylesheet library="css" name="printing.css" ></h:outputStylesheet>

                <h:form>

                    <p:panel header="Manage Patients" styleClass="alignTop verticalAndHorizontalCenteringLarge"
                             style="height: 600px;">
                        <h:panelGrid columns="2" >

                            <h:panelGroup>

                                <p:panel id="panelSearch" header="Search Patients" >
                                    <f:facet name="header" >
                                        <h:outputLabel value="Search Patients" />

                                        <p:commandButton id="btnDeletePt" 
                                                         style="float: right;" 
                                                         value="Delete" process="btnDeletePt" 
                                                         update="acPt :#{p:component('panelDetails')} :#{p:component('patientDetail')} " 
                                                         action="#{patientController.delete()}" onclick="onSubmitButton();" 
                                                         rendered="#{webUserController.hasPrivilege('ClinicalPatientDelete')}">
                                        </p:commandButton>

                                        <!--                                        <p:commandButton id="btnPrintCard" action="/clinical/clinical_print_barcode" style="float: right;" value="Print Card" ajax="false" onclick="onSubmitButton();">
                                                                                 </p:commandButton>-->

                                    </f:facet>

                                    <h:panelGrid columns="1" >
                                        <h:outputLabel value="Search by Name/Code/Phone/NIC/PHN" />
                                        <p:autoComplete widgetVar="aPt" id="acPt" forceSelection="true" 
                                                        value="#{patientController.current}" 
                                                        completeMethod="#{patientController.completePatientByNameOrCode}" 
                                                        var="apt" itemLabel="#{apt.person.name}" 
                                                        itemValue="#{apt}" size="30"  style="width: 400px;"
                                                        >
                                            <p:column headerText="Name">
                                                <h:outputLabel value="#{apt.person.nameWithTitle}" />
                                            </p:column>

                                            <p:column headerText="Age">
                                                <h:outputLabel value="#{apt.age}" />
                                            </p:column>
                                            <p:column headerText="NIC">
                                                <h:outputLabel value="#{apt.person.nic}"/>
                                            </p:column>
                                            <p:column headerText="Code">
                                                <h:outputLabel value="#{apt.code}" />
                                            </p:column>
                                            <p:column headerText="PHN">
                                                <h:outputLabel value="#{apt.phn}"/>
                                            </p:column>
                                            <p:column headerText="Sex">
                                                <h:outputLabel value="#{apt.person.sex}" />
                                            </p:column>
                                            <p:column headerText="Address">
                                                <h:outputLabel value="#{apt.person.address}" />
                                            </p:column>
                                            <p:column headerText="Date of Birth">
                                                <h:outputLabel value="#{apt.person.dob}" >
                                                    <f:convertDateTime pattern="dd MMMM yyyy"/>
                                                </h:outputLabel>
                                            </p:column>
                                            <f:ajax event="itemSelect" execute="acPt" render=":#{p:component('panelDetails')}" 
                                                    listener="#{patientController.patientSelected}"/>
                                        </p:autoComplete>

                                    </h:panelGrid>

                                </p:panel>

                            </h:panelGroup>

                            <p:panel id="panelDetails"   >
                                <f:facet name="header" >
                                    <!--                                    <h:outputLabel value="Details of Selected Patient" />-->
                                    <h:outputLabel value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" />
                                    <p:commandButton  process="panelDetails" update="acPt" value="Save" 
                                                      action="#{patientController.saveSelected()}"></p:commandButton>
                                    <p:commandButton id="btnAddPt" 
                                                     style="float: right;" 
                                                     value="Add New Patient" process="btnAddPt" 
                                                     update="acPt :#{p:component('panelDetails')} :#{p:component('patientDetail') } :#{p:component('pan1') } " 
                                                     action="#{patientController.prepareAddReg()}" onclick="onSubmitButton();" 
                                                     >
                                    </p:commandButton>
                                </f:facet>


                                <p:tabView  style="width: 600px!important;">

                                    <p:tab title="Patient Details" >

                                        <h:panelGrid id="patientDetail" columns="2" >
                                            <p:panel>
                                                <h:panelGrid columns="2" style="margin-bottom:7px;" id="pan">
                                                    <h:selectOneRadio value="#{patientController.membershipTypeListner}" >
                                                        <f:selectItem itemLabel="Individual" itemValue="1" />
                                                        <f:selectItem itemLabel="Family" itemValue="2" />
                                                        <f:ajax event="change" execute="@this" render="pan5 " listener="#{patientController.getMembershipTypeListner()}"/>  </h:selectOneRadio>
                                                </h:panelGrid>
                                                <h:panelGrid id="pan5">
                                                    <p:commandButton  ajax="true" type="button" value="Add Family Members" onclick="dlg.show();" rendered="#{patientController.membershipTypeListner eq '2'}" actionListener="#{patientController.listnerFamilyMember()}" />
                                                </h:panelGrid>




                                            </p:panel>

                                            <p:panel id="pan1">

                                                <p:panelGrid columns="2" id="panGrid1">
                                                    <h:outputLabel value="Title"/>
                                                    <p:selectOneMenu  rendered="#{patientController.current.person ne null}" id="cmbTitle" value="#{patientController.current.person.title}"  >
                                                        <f:selectItems value="#{patientController.titles}" var="t" itemLabel="#{t.label}" itemValue="#{t}"/>
                                                    </p:selectOneMenu>
                                                    <h:outputLabel value=" Full Name"/>
                                                    <p:inputText autocomplete="off"  id="txtNewPtName" value="#{patientController.current.person.name}" style="width: 200px;text-transform:capitalize;">
                                                    </p:inputText>
                                                    <h:outputLabel value="Gender"/>
                                                    <h:outputLabel rendered="#{patientController.current.person eq null}" value=""/>
                                                    <p:selectOneMenu rendered="#{patientController.current.person ne null}" id="txtNewSex"  value="#{patientController.current.person.sex}" style="width: 200px;">
                                                        <f:selectItem itemLabel="Select Sex"/>
                                                        <f:selectItems value="#{patientController.sexs}"/>
                                                    </p:selectOneMenu>
                                                    <h:outputLabel value="NIC"/>
                                                    <p:inputMask mask="999999999V" value="#{patientController.current.person.nic}" />
                                                    <h:outputLabel value="Code"/>
                                                    <p:inputText value="#{patientController.current.code}"/>

                                                    <h:outputLabel value="Age"/>
                                                    <h:panelGrid columns="3">
                                                        <p:inputText autocomplete="off"  id="year" style="width: 80px;" value="#{patientController.yearMonthDay.year}">
                                                            <f:ajax event="keyup" execute="@this" render="calNewPtDob  "  listener="#{patientController.dateChangeListen()}"  />
                                                        </p:inputText>
                                                        <p:inputText autocomplete="off" id="month"   style="width: 80px;" value="#{patientController.yearMonthDay.month}">
                                                            <f:ajax event="keyup" execute="@this"  render="calNewPtDob " listener="#{patientController.dateChangeListen()}"  />
                                                        </p:inputText>
                                                        <p:inputText autocomplete="off" id="day"  style="width: 80px;"  value="#{patientController.yearMonthDay.day}">
                                                            <f:ajax event="keyup" execute="@this"  render="calNewPtDob " listener="#{patientController.dateChangeListen()}" />
                                                        </p:inputText>
                                                    </h:panelGrid>
                                                    <h:outputLabel value="Date of Birth"/>
                                                    <p:calendar  value="#{patientController.current.person.dob}" id="calNewPtDob"  navigator="true" pattern="dd/MM/yyyy" >
                                                        <f:ajax event="dateSelect" execute="calNewPtDob"/>
                                                    </p:calendar>

                                                    <h:outputLabel value="Phone"/>
                                                    <p:inputMask mask="999-9999999" id="txtNewPtPhone" autocomplete="off" maxlength="11" value="#{patientController.current.person.phone}">
                                                    </p:inputMask>
                                                    <h:outputLabel value="Address"/>
                                                    <p:inputText autocomplete="off"  id="txtNewPtAddress" value="#{patientController.current.person.address}">
                                                    </p:inputText>
                                                    <h:outputLabel value="Email"/>
                                                    <p:inputText autocomplete="off"  id="txtNewPtEmail" value="#{patientController.current.person.email}">
                                                    </p:inputText>
                                                    <h:outputLabel value="Membership Category"/>
                                                    <p:inputText autocomplete="off"  >
                                                    </p:inputText>
                                                </p:panelGrid>


                                                <p:dataTable id="familyDetails" value="#{patientController.familyMembers}" var="fm">
                                                    <p:column headerText="Name">
                                                        <h:outputLabel value="#{fm.fullName}"></h:outputLabel>
                                                    </p:column>
                                                    <p:column headerText="Gender">
                                                        <h:outputLabel value="#{fm.sex}"></h:outputLabel>
                                                    </p:column>
                                                    <p:column headerText="DOB">
                                                        <h:outputLabel value="#{fm.dob}">
                                                            <f:convertDateTime pattern="yyyy-MM-dd"/>
                                                    </h:outputLabel>
                                                    </p:column>
                                                    <p:column headerText="NIC">
                                                        <h:outputLabel value="#{fm.nic}"></h:outputLabel>
                                                    </p:column>
                                                    <p:column headerText="Serial NO">
                                                        <h:outputLabel value="#{fm.serealNumber}"></h:outputLabel>
                                                    </p:column>
                                                    <p:column headerText="Modify">
                                                        <p:panelGrid columns="2" styleClass="noBorder noBorderGrid ">
                                                            <p:commandButton value="Remove" action="#{patientController.removeFamilyMember(fm)}" update="familyDetails"/>
                                                        </p:panelGrid>
                                                    </p:column>
                                                </p:dataTable>


                                            </p:panel>

                                        </h:panelGrid>

                                    </p:tab>

                                    <p:tab title="Photo" >


                                        <p:tab title="Visit Details" >
                                            <p:dataTable id="tblPastVisits" value="#{patientEncounterController.currentPatientEncounters}"
                                                         var="pe"
                                                         >
                                                <p:column headerText="Visit Date" >
                                                    <h:outputLabel value="#{pe.dateTime}" >
                                                        <f:convertDateTime pattern="dd MMMM yyyy - hh:mm a" ></f:convertDateTime>
                                                    </h:outputLabel>
                                                </p:column>
                                                <p:column >
                                                    <h:commandButton value="View" action="/clinical/clinical_new_opd_visit" >
                                                        <f:setPropertyActionListener value="#{pe}" target="#{patientEncounterController.current}" ></f:setPropertyActionListener>
                                                    </h:commandButton>
                                                </p:column>
                                            </p:dataTable>

                                        </p:tab>

                                        <p:panel id="panPhoto" >


                                            <h:panelGrid columns="2"> 
                                                <p:graphicImage  style="border: 1px solid red;" 
                                                                 id="photos" 
                                                                 rendered="#{patientController.current.baImage ne null}"    
                                                                 value="#{patientController.getPhotoByByte(patientController.current.baImage)}"  >
                                                </p:graphicImage>
                                                <h:panelGroup >
                                                    <p:photoCam widgetVar="pc" listener="#{photoCamBean.oncapturePatientPhoto}" update="photos"/>  
                                                    <p:commandButton type="button" value="Capture" 
                                                                     onclick="PF('pc').capture()" />  
                                                </h:panelGroup>




                                            </h:panelGrid>  


                                        </p:panel>


                                    </p:tab>
                                </p:tabView>




                            </p:panel>



                        </h:panelGrid>
                    </p:panel>

                </h:form>
                <h:form id="form1">
                    <p:growl id="growl" sticky="true" showDetail="true" life="3000" />
                    <p:dialog   header="Add Members" widgetVar="dlg" resizable="false" >


                        <p:panel id="pan2">
                            <p:panelGrid columns="2" id="panGrid2">

                                <h:outputLabel value=" Full Name"/>
                                <p:inputText autocomplete="off"  style="width: 200px;text-transform:capitalize;" value="#{patientController.familyMember.fullName}"  requiredMessage="please enter full name">
                                </p:inputText>
                                <h:outputLabel value="Gender"/>
                                <p:selectOneMenu value="#{patientController.familyMember.sex}" style="width: 200px;"  requiredMessage="please select gender">
                                    <f:selectItem itemLabel="Select Sex"/>
                                    <f:selectItems value="#{patientController.sexs}" />
                                </p:selectOneMenu>

                                <h:outputLabel value="NIC"/>
                                <p:inputText value="#{patientController.familyMember.nic}"  requiredMessage="please enter NIC no"/>

                                <h:outputLabel value="Date of Birth"/>
                                <p:calendar  value="#{patientController.familyMember.dob}"  navigator="true" pattern="dd/MM/yyyy"  requiredMessage="please enter date of birth"/>

                                <p:commandButton value=" Add Member" actionListener="#{patientController.createFamilymembers}" update=":#{p:component('familyDetails')} pan2" oncomplete="handleLoginRequest(xhr, status, args)"/>
                                <p:commandButton value="Cancel" onclick="PF('dlg').hide()" actionListener="#{patientController.listnerFamilyMember()}" ajax="false"/>
                                <p:commandButton value="CLEAR" actionListener="#{patientController.listnerFamilyMember()}" update="pan2"/>
                            </p:panelGrid>
                        </p:panel>

                    </p:dialog> </h:form>

                <script type="text/javascript">
                    function handleLoginRequest(xhr, status, args) {
                        if (!args.loggedIn) {
                            PF('dlg').jq.effect("shake", {times: 5}, 100);
                        }
                        else {
                            PF('dlg').hide();

                        }
                    }
                </script>
                <script>
                    function reloadPage() {
                        location.reload();
                    }
                </script>
            </ui:define>



        </ui:composition>

    </h:body>
</html>
